<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据填报</el-breadcrumb-item>
      <el-breadcrumb-item>填报记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 施工员 进度 记录-->
      <div class="process" v-if="arr.indexOf('process') > -1">
        <div class="report">
          <el-row>
            <el-col :span="17"><span class="title">施工员-进度表填报记录</span></el-col>
            <el-col :span="7">
              <el-input placeholder="请输入名称" v-model="proQuery.query" @keyup.enter="getProcess()" clearable @clear="getProcess()">
                <template #append><el-button icon="el-icon-search" @click="getProcess()"></el-button></template>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="process" border stripe style="margin-bottom:15px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="关联项目" prop="itemName"></el-table-column>          
            <el-table-column label="上报时间"><template v-slot="scope"><span>{{DateFormat(scope.row.createTime)}}</span></template></el-table-column>
            <el-table-column label="上报员" prop="reportId"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status==2">不通过</span>
                <span v-if="scope.row.status==1">已通过</span>
                <span v-if="scope.row.status==0">未审核</span>
              </template>
            </el-table-column>
            <el-table-column label="审核主管">
              <template v-slot="scope">
                <span v-if="scope.row.status==0">无</span>
                <span v-else>{{scope.row.reviewId}}</span>
              </template>
            </el-table-column>
            <el-table-column label="原因">
              <template v-slot="scope"><span>{{scope.row.status==2?scope.row.reason:'无'}}</span></template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-config-provider :locale="locale">
            <el-pagination @size-change="proSizeChange" @current-change="proCurChange" :current-page="proQuery.pagenum"
              :page-sizes="[5,10,20]" :page-size="proQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="proTotal">
            </el-pagination>
          </el-config-provider>
        </div>
        <div class="excel">
          <!-- excel表上传记录 -->
        </div>
      </div>

      <!-- 实验员 试验检测记录 -->
      <div class="experiment" v-if="arr.indexOf('experiment') > -1">
        <div class="report">
          <el-row>
            <el-col :span="17"><span class="title">实验员-试验检测填报记录</span></el-col>
            <el-col :span="7">
              <el-input placeholder="请输入试验名称" v-model="expQuery.query" @keyup.enter="getExperiment()" clearable @clear="getExperiment()">
                <template #append><el-button icon="el-icon-search" @click="getExperiment()"></el-button></template>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="experiment" border stripe style="margin-bottom:15px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column min-width="160" label="试验名称" prop="experimentContentName"></el-table-column>
            <el-table-column min-width="140" label="关联项目" prop="itemName">
              <template v-slot="scope"><span>{{scope.row.itemName?scope.row.itemName:'无'}}</span></template>
            </el-table-column>
            <el-table-column label="上报时间"><template v-slot="scope"><span>{{DateFormat(scope.row.createTime)}}</span></template></el-table-column>
            <el-table-column label="清单量" prop="inventoryQuantity"></el-table-column>
            <el-table-column label="公式" prop="formula"></el-table-column>
            <el-table-column label="应作量" prop="requiredQuantity"></el-table-column>
            <el-table-column label="上报量" prop="reportedQuantity"></el-table-column>
            <el-table-column label="上报员" prop="reportId"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status==2">不通过</span>
                <span v-if="scope.row.status==1">已通过</span>
                <span v-if="scope.row.status==0">未审核</span>
              </template>
            </el-table-column>
            <el-table-column label="审核主管">
              <template v-slot="scope">
                <span v-if="scope.row.status==0">无</span>
                <span v-else>{{scope.row.reviewId}}</span>
              </template>
            </el-table-column>
            <el-table-column label="原因">
              <template v-slot="scope"><span>{{scope.row.status==2?scope.row.reason:'无'}}</span></template>
            </el-table-column>
          </el-table>
          <el-config-provider :locale="locale">
            <el-pagination @size-change="expSizeChange" @current-change="expCurChange" :current-page="expQuery.pagenum"
              :page-sizes="[5,10,20]" :page-size="expQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="expTotal">
            </el-pagination>
          </el-config-provider>
        </div>
        <div class="excel">
        </div>
      </div>

      <!-- 资料员 资料记录 -->
      <div class="document" v-if="arr.indexOf('document') > -1">
        <div class="report">
          <el-row>
            <el-col :span="17"><span class="title">资料员-资料填报记录</span></el-col>
            <el-col :span="7">
              <el-input placeholder="请输入资料名称" v-model="docQuery.query" @keyup.enter="getDocument()" clearable @clear="getDocument()">
                <template #append><el-button icon="el-icon-search" @click="getDocument()"></el-button></template>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="document" border stripe style="margin-bottom:15px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="册数" prop="volume"></el-table-column>
            <el-table-column label="文件材料名称" prop="documentContentName"></el-table-column>
            <el-table-column label="编制完成" prop="isOrganization">
              <template v-slot="scope"><span>{{scope.row.isOrganization?'是':'否'}}</span></template>
            </el-table-column>
            <el-table-column label="监理已签认" prop="isSupervisor">
              <template v-slot="scope"><span>{{scope.row.isSupervisor?'是':'否'}}</span></template>
            </el-table-column>
            <el-table-column label="设计已签认" prop="isDesign">
              <template v-slot="scope"><span>{{scope.row.isDesign?'是':'否'}}</span></template>
            </el-table-column>
            <el-table-column label="建设单位已签认" prop="isConstruction">
              <template v-slot="scope"><span>{{scope.row.isConstruction?'是':'否'}}</span></template>
            </el-table-column>
            <el-table-column label="已移交档案馆" prop="isArchives">
              <template v-slot="scope"><span>{{scope.row.isArchives?'是':'否'}}</span></template>
            </el-table-column>
            <el-table-column label="上报时间"><template v-slot="scope"><span>{{DateFormat(scope.row.createTime)}}</span></template></el-table-column>
            <el-table-column label="上报员" prop="reportUserId"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status==2">不通过</span>
                <span v-if="scope.row.status==1">已通过</span>
                <span v-if="scope.row.status==0">未审核</span>
              </template>
            </el-table-column>
            <el-table-column label="审核主管">
              <template v-slot="scope">
                <span v-if="scope.row.status==0">无</span>
                <span v-else>{{scope.row.reviewId}}</span>
              </template>
            </el-table-column>
            <el-table-column label="原因">
              <template v-slot="scope"><span>{{scope.row.status==2?scope.row.reason:'无'}}</span></template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-config-provider :locale="locale">
            <el-pagination @size-change="docSizeChange" @current-change="docCurChange" :current-page="docQuery.pagenum"
              :page-sizes="[5,10,20]" :page-size="docQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="docTotal">
            </el-pagination>
          </el-config-provider>
        </div>
        <div class="excel">
          <el-row>
            <el-col :span="17"><span class="title">资料员-excel上传记录</span></el-col>
            <el-col :span="7">
              <el-input placeholder="请输入excel表名称" v-model="docEQuery.query" @keyup.enter="getDocumentExcel()" clearable @clear="getDocumentExcel()">
                <template #append><el-button icon="el-icon-search" @click="getDocumentExcel()"></el-button></template>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="documentExcel" border stripe style="margin-bottom:15px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="excel名称" prop="excelName"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status==1">已通过</span>
                <span v-if="scope.row.status==2">不通过</span>
              </template>
            </el-table-column>
            <el-table-column label="上报员" prop="reportUserId"></el-table-column>
            <el-table-column label="审核时间"><template v-slot='scope'>{{DateFormat(scope.row.updateTime)}}</template></el-table-column>
            <el-table-column label="审核主管" prop="reviewUserId"></el-table-column>
            <el-table-column label="原因"><template v-slot="scope"><span>{{scope.row.status==2?scope.row.reason:'无'}}</span></template></el-table-column>
          </el-table>
          <el-config-provider :locale="locale">
            <el-pagination @size-change="docESizeChange" @current-change="docECurChange" :current-page="docEQuery.pagenum" 
              :page-sizes="[5,10,20]" :page-size="docEQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="docETotal">
            </el-pagination>
          </el-config-provider>
        </div>
      </div>

      <!-- 合约员 excel上传记录 -->
      <div class="baseInventory" v-if="arr.indexOf('baseInventory') > -1">
        <div class="excel">
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import dateFormatFun from "../../plugins/dateFormat";
export default {
  data() {
    return {
      arr:['document','experiment','process','baseInventory'],

      process: [],
      proQuery:{
        query:"", pagenum:1, pagesize:5
      },
      proTotal:0,

      experiment: [],
      expQuery:{
        query:"", pagenum:1, pagesize:5
      },
      expTotal:0,

      document: [],
      docQuery:{
        query:"", pagenum:1, pagesize:5
      },
      docTotal:0,
      documentExcel: [],
      docEQuery:{
        query:"", pagenum:1, pagesize:5
      },
      docETotal:0,

    };
  },
  setup() {
    return {
      locale: zhCn
    };
  },
  mounted() {
    if(this.arr.indexOf('document') > -1){ this.getDocument(); this.getDocumentExcel();}
    if(this.arr.indexOf('experiment')>-1){ this.getExperiment(); }
    if(this.arr.indexOf('process')>-1){ this.getProcess(); }
  },
  computed:{
    DateFormat(){
      return function(date){
        return dateFormatFun(date,2);
      };
    }
  },
  methods: {
  // 获取试验数据
    async getExperiment() {
      const { data: res } = await this.$http.get("experimenter/getReportedExperiment",{params: this.expQuery});
      if (res.code !== 200) return this.$message.error(res.msg);
      this.experiment = res.data.list;
      this.expTotal = res.data.total;
    },
    expSizeChange(newSize) {
      this.expQuery.pagesize = newSize;
      this.getExperiment();
    },
    expCurChange(newPage) {
      this.expQuery.pagenum = newPage;
      this.getExperiment();
    },
  // 获取资料数据
    async getDocument() {
      const { data: res } = await this.$http.get("documenter/getReportedDocument",{params: this.docQuery});
      if (res.code !== 200) return this.$message.error(res.msg);
      this.document = res.data.list;
      this.docTotal = res.data.total;
    },
    async getDocumentExcel() {
      const { data: res } = await this.$http.get("documenter/getReportedDocumentExcel",{params: this.docEQuery});
      if (res.code !== 200) return this.$message.error(res.msg);
      this.documentExcel = res.data.list;
      this.docETotal = res.data.total;
    },
    docSizeChange(newSize) {
      this.docQuery.pagesize = newSize;
      this.getDocument();
    },
    docCurChange(newPage) {
      this.docQuery.pagenum = newPage;
      this.getDocument();
    },
    docESizeChange(newSize) {
      this.docEQuery.pagesize = newSize;
      this.getDocumentExcel();
    },
    docECurChange(newPage) {
      this.docEQuery.pagenum = newPage;
      this.getDocumentExcel();
    },
  // 获取进度表数据
    async getProcess() {
      // const { data: res } = await this.$http.get("",{     //-------------------
      //   params: this.proQuery
      // });
      // console.log(res);
      // if (res.code !== 200) return this.$message.error(res.msg);
      // this.process = res.data.list;
      // this.proTotal = res.data.total;
    },
    proSizeChange(newSize) {
      this.proQuery.pagesize = newSize;
      this.getProcess();
    },
    proCurChange(newPage) {
      this.proQuery.pagenum = newPage;
      this.getProcess();
    },
  }
};
</script>

<style lang="less" scoped>
.title{
    font-size: 14px;
    color:#666;
    display: block;
    padding:10px 0 0 2px;
  }
</style>
